<template>
  <div>
    <div id="head">
      <el-input placeholder="搜索学科" v-model="input1" clearable> </el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-input placeholder="搜索题型" v-model="input2" clearable> </el-input>
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-button
        type="primary"
        style="float: right"
        @click="viewStandard"
        icon="el-icon-view"
        >发布命题规范</el-button
      >
      <el-button
        type="primary"
        style="float: right"
        @click="addStandard"
        icon="el-icon-edit"
        >+添加命题规范</el-button
      >
    </div>

    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="创建时间" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
        <template slot-scope="scope">{{ scope.row.subject }}</template>
      </el-table-column>
      <el-table-column prop="label" label="知识点">
        <template slot-scope="scope">{{ scope.row.label }}</template>
      </el-table-column>
      <el-table-column prop="questions" label="题型" width="120">
        <template slot-scope="scope">{{ scope.row.questions }}</template>
      </el-table-column>
      <el-table-column prop="stem" label="题干">
        <template slot-scope="scope">{{ scope.row.stem }}</template>
      </el-table-column>
      <el-table-column prop="score" label="分数" width="120">
        <template slot-scope="scope">{{ scope.row.score }}</template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template slot-scope="scope">{{ scope.row.difficulty }}</template>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="handleView(scope.$index, scope.row)"
            >预览</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogFormVisible">
      <label for="题干："></label>
      <h3>{{ dialogdata.stem }}</h3>
      <p>A.这是绝对正确的</p>
      <p>B.这是绝对不正确的</p>
      <p>C.A和B都错</p>
      <p>D.啊对对对</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 添加命题规范 -->
    <el-dialog title="命题规范" center :visible.sync="dialogFormVisible3">
      <el-input
        style="width: 40%"
        type="textarea"
        placeholder="请输入版本(存在则自动更新)"
        v-model="stand.version"
        :rows="1"
      ></el-input>
      <el-input
        style="margin: 10px 0px"
        type="textarea"
        placeholder="请输入内容"
        v-model="stand.content"
        :rows="10"
      ></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="confimcommit">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发布命题规范 -->
    <el-dialog title="命题规范" center :visible.sync="dialogFormVisible2">
      <el-select
        v-model="value"
        @change="changeSelete"
        placeholder="请选择版本"
      >
        <el-option
          v-for="item in message"
          :key="item.version"
          :label="item.version"
          :value="item.version"
        >
        </el-option>
      </el-select>
      <hr />
      <el-row :gutter="10">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-html="textarea1"
        ></el-input>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="publish"
          >确 定 发 布</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>


<style lang="less" scoped>
#head {
  .el-input {
    width: 20%;
    margin: 10px;
  }
}
.son {
  right: 50%;
  width: 80%;
  height: 500px;
  border: 1px solid rgb(172, 172, 172);
}
.el-dialog {
  .el-input {
    margin: 10px;
    line-height: 20px;
  }
}
</style>

<script>
import axios from "axios";
export default {
  data() {
    return {
      stand: {//存储添加命题规范信息
        version: "",
        content: "",
      },
      value: "",//存储发布下拉框信息
      input1: "",
      input2: "",
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      textarea: "",
      textarea1: "",
      dialogdata: {
        stem: "",
      },
      tableData: [
        {
          date: "2016-05-03",
          subject: "高等数学",
          label: "",
          questions: "选择题",
          stem: "122212121",
          score: "2.5",
          difficulty: "3",
        },
        {
          date: "2016-05-03",
          subject: "离散数学",
          label: "",
          questions: "选择题",
          stem: "855858421",
          score: "2.5",
          difficulty: "3",
        },
        {
          date: "2016-05-03",
          subject: "计算机组成原理",
          label: "",
          questions: "选择题",
          stem: "12221撒旦撒1",
          score: "2.5",
          difficulty: "3",
        },
        {
          date: "2016-05-03",
          subject: "高等数学",
          label: "",
          questions: "选择题",
          stem: "12121",
          score: "2.5",
          difficulty: "3",
        },
        {
          date: "2016-05-03",
          subject: "高等数学",
          label: "",
          questions: "选择题",
          stem: "lklk",
          score: "2.5",
          difficulty: "3",
        },
      ],
      multipleSelection: [],
      message: [],
    };
  },
  methods: {
    changeSelete() {
      this.message.forEach((el) => {
        if (el.version == this.value) {
          this.textarea1 = el.content;
        }
      });
    },
    publish(){
      if(this.value!=''){
        console.log(1);
        axios({
          method:'POST',
          url:'http://42.193.219.14:8080/modifySelectedPropositionNorm',
          params:{version:this.value}
          }).then(data=>{
          this.dialogFormVisible2=false;
          this.$message({
            message: "发布成功",
            type: "success",
            showClose: true,
            duration: 2000,
          });
        })
      }
      else {
        this.$message({
            message: "版本信息不为空",
            type: "warning",
            showClose: true,
            duration: 2000,
          });
      }
    },
    confimcommit() {
      axios({
        method: "POST",
        url: "http://42.193.219.14:8080/setPropositionSpecification",
        data: this.stand,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      })
        .then((data) => {
          this.dialogFormVisible3 = false;
          this.$message({
            message: "添加规范成功",
            type: "success",
            showClose: true,
            duration: 2000,
          });
          console.log(data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    viewStandard() {
      this.dialogFormVisible2 = true;
      axios({
        method: "GET",
        url: "http://42.193.219.14:8080//getPropositionSpecification",
      })
        .then((data) => {
          this.message = data.data.data;
          console.log(this.message);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addStandard() {
      this.dialogFormVisible3 = true;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleView(val, b) {
      console.log(b);
      this.dialogFormVisible = true;
      this.dialogdata.stem = b.stem;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("将永久删除此试卷, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.tableData = this.filterArr2(this.tableData, row);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    filterArr2(data, row) {
      return data.filter((el) => {
        return el.stem != row.stem;
      });
    },
  },
};
</script>

